<%--
  Created by IntelliJ IDEA.
  User: q
  Date: 2021/10/29
  Time: 9:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>注册页面</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="${applicationScope.backendStyleFolder}/js/jquery.js"></script>
<script type="text/javascript" src="${applicationScope.backendStyleFolder}/js/page_common.js"></script>
<body>
<%--  <!--头部显示-->
  <nav class="header" id="head">
    <img class="Logo" src="LOGO.jpg">
    <h1 class="LogoName">客户应用平台</h1>
    <img src="TopPic.png" width="100%" height="53">
  </nav>--%>
<!--中部内容-->
<div class="wrap" id="wrap">
    <div class="logWrap" >
        <%--<img id="banner" class="banner" src="demo2.jpg" >--%>
        <div class="logWrap">
            <!-- 头部提示信息 -->
            <div class="LoginIndex LoginTop">
                <p class="p1">欢迎注册~</p>
            </div>
            <form action="/login?method=logon" method="post">
                <!-- 输入框 -->
                <div class="InputStr">用户名：
                    <%--<img src="user.png" width="20" height="20" alt=""/>--%>
                    <input type="text" name="username" id="username"
                           placeholder="输入用户名" /><span id="msg"></span>
                </div>
                <div class="InputStr">密码：
                    <%--<img src="password.png" width="20" height="20" alt=""/>--%>
                    <input type="password" name="password"
                           placeholder="输入用户密码" />
                </div>
                <div class="InputStr">验证码：<input type="text" name="check"/>&nbsp;<img style="top: -10px;left: 70px" src="verifyCode" onclick="changeVerifyCode(this);"/></div>
                <div class="InputStr"></div>
                <div class="LoginIndex LoginTop">
                    <input type="radio" id="front" name="isAdmin" value="0" checked=""/><label for="front">注册前台账户</label>
                    <input type="radio" id="backend" name="isAdmin" value="1" /><label for="backend">注册后台账户</label>
                </div>
                <div class="LoginButton">
                    <a href="index.html" target="_self"><button id="addBtn">注 册</button></a>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script>

    $("#username").change(function () {
        $.get("/login?method=nameLogonExists",{"userName" : $(this).val()},function (result) {
            $("#msg").text(result.message)
            if (result.success){
                $("#msg").css("color", "green");
                $("#addBtn").attr("disabled", false);
            } else {
                $("#msg").css("color", "red");
                $("#addBtn").attr("disabled", true);
            }
        },"json")
    })

</script>
<style>

    *{
        margin: 0;
        padding: 0;
    }
    #head{
        height: 90px;

    }
    #head .Logo{
        width: 72px;
        height: 72px;
        vertical-align: middle;
    }
    #head .LogoName{
        font-size:40px;
        font-family:"楷体";
        color:#00BFFF;
        display:inline;
        position: absolute;
        top: 14px;
    }
    #wrap {
        height: 408px;
        width: 100%;
        position:relative;
    }
    #wrap .logWrap{
        height: 408px;
        width: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        right: 50%;
        margin: 0 0 0 -300px;
        display: inline-block;
    }
    #wrap .banner{
        height: 300px;
        width: 300px;
        position: absolute;
        top: 26%;
    }
    #wrap .logWrap {
        float: right;
        height: 408px;
        width: 368px;
        position: absolute;
        top: 0%;
        left: 55%;
        right: 45%
    }
    .LoginButton a button {
        width: 100%;
        height: 45px;
        background-color: greenyellow;
        border: none;
        color: white;
        font-size: 18px;
    }
    .logWrap .LoginIndex.LoginTop .p1 {
        display: inline-block;
        font-size: 28px;
        margin-top: 110px;
        width: 86%;
    }
    #wrap .logWrap .LoginIndex.LoginTop {
        width: 86%;
        border-bottom: 1px solid #ee7700;
        margin-bottom: 60px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    }
    .logWrap .InputStr img {
        position: absolute;
        top: 12px;
        left: 8px;
    }
    .logWrap .InputStr input {
        width: 100%;
        height: 42px;
        text-indent: 2.5rem;
    }
    #wrap .logWrap .InputStr {
        width: 86%;
        position: relative;
        margin-bottom: 30px;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
    }
    #wrap .logWrap .LoginButton {
        width: 86%;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }

    /*----------------背景-----------------*/
    body {
        margin: 0;
        width: 100%;
        height: 100vh;
        font-family: "Exo", sans-serif;
        color: #fff;
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
    }

    @keyframes gradientBG {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .container {
        width: 100%;
        position: absolute;
        top: 35%;
        text-align: center;
    }

    h1 {
        font-weight: 300;
    }

    h3 {
        color: #eee;
        font-weight: 100;
    }

    h5 {
        color:#eee;
        font-weight:300;
    }

    a,
    a:hover {
        text-decoration: none;
        color: #ddd;
    }


</style>
